<template>
  <input :type="type" :value="currentValue" @input="handleInput" @blur="handleBlur" />
</template>

<script>
import Emitter from '@/mixins/emitter.js'
export default {
  name: 'gInput',
  mixins: [Emitter],
  props: {
    value: {
      type: [String, Number],
      default: '',
    },
    type: {
      type: String,
      default: 'text',
      validator(val) {
        return ['text', 'number'].indexOf(val) !== -1
      },
    },
  },
  data() {
    return {
      currentValue: this.value,
    }
  },
  watch: {
    value(val) {
      this.currentValue = val
    },
  },
  methods: {
    handleInput(event) {
      const value = event.target.value
      this.currentValue = value
      this.$emit('input', value)
      this.dispatch('gFormItem', 'on-form-change', value)
    },
    handleBlur() {
      this.dispatch('gFormItem', 'on-form-blur', this.currentValue)
    },
  },
}
</script>
